<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../../webapp/static/js/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function () {
            // 给 [ 全选/全不选 ] 绑定单击事件
            $("#checkedAllBox").click(function () {
                // 获取[全选/全不选]复选框的选中状态
                // 在事件响应的function函数中,有一个this对象,这个this对象是当前正在响应事件的dom对象.
                // alert(this.checked);
                // 设置全部球类的选中状态
                $(":checkbox[name]").prop("checked", this.checked);
            });

            // 给 [反选] 按钮绑定单击事件
            $("#checkedRevBtn").click(function () {
                // 获取四个球类的复选框
                $(":checkbox[name]").each(function () {
                    // 在each遍历的function函数中,有一个this对象,这this对象是当前正在遍历到的dom对象
                    this.checked = !this.checked;
                });

                // 反选完成后,我们需要看一下,所有球类是否全选.
                // 如果全选,则应该把[全选/全不选]也选中,反之亦然
                // 获取全部的球类的个数
                var allCount = $(":checkbox[name]").length;

                // 获取选中的球类的个数
                var checkedCount = $(":checkbox[name]:checked").length;

                // 修改[全选/全不选的选中状态]
                $("#checkedAllBox").prop("checked", allCount == checkedCount);
            });

            // [全选]单击事件
            $("#checkedAllBtn").click(function () {
                $(":checkbox").prop("checked", true);
            })

            // [全不选]单击事件
            $("#checkedNoBtn").click(function () {
                $(":checkbox").prop("checked", false);
            })

            // [提交]单击事件
            $("#sendBtn").click(function () {
                $(":checkbox[name]:checked").each(function () {
                    alert(this.value);
                })
            })
        });
    </script>
</head>
<body>
    <form method="post" action="" >
        你爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全不选
        <br/>
        <input type="checkbox" name="items" value="足球"/>足球
        <input type="checkbox" name="items" value="篮球"/>篮球
        <input type="checkbox" name="items" value="羽毛球"/>羽毛球
        <input type="checkbox" name="items" value="乒乓球"/>乒乓球
        <br/>
        <input type="button" id="checkedAllBtn" value="全 选"/>
        <input type="button" id="checkedNoBtn" value="全不选"/>
        <input type="button" id="checkedRevBtn" value="反 选"/>
        <input type="button" id="sendBtn" value="提 交"/>
    </form>


</body>
</html>